<!--
 * @Author: folusGan 245942153@qq.com
 * @Date: 2024-07-08 15:20:50
 * @LastEditors: folusGan 245942153@qq.com
 * @LastEditTime: 2024-10-22 14:15:01
 * @Description: 
-->
<template>
  <div>
    <el-row class="flex-wrap">
      <div v-for="(imgTitle, i) in imgs" class="item" :key="i">
        <div class="pad-5" @click="goDetail(i + 1)">
          <div :class="['main-page', `product-conrainer-${i + 1}`]"></div>
          <h1 class="text-center">{{ imgTitle }}</h1>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import i18n from "@/lang/index";

const imgDetail = [
  {
    title: "DB001",
    Description: {
      Diameter: "63mm",
      thickness: "30-45mm",
      Backset: "60/85mm",
      color: i18n.t("goldOrSiler"),
      direction: i18n.t("adjustableBothSide"),
    },
  },
  {
    title: "DB002",
    Description: {
      Diameter: "64.65mm",
      thickness: "32-45/45-51/50-60mm",
      Backset: "60-70/70/85/127mm",
      // direction: i18n.t("adjustableBothSide"),
      others: i18n.t("bothSideLockNoTwistBotton"),
    },
  },
  {
    title: "DB003",
    Description: {
      Diameter: "64.8mm",
      thickness: "35-45/40-51mm",
      Backset: "60-70/70/85/127mm",
      // color: i18n.t("goldOrSiler"),
      direction: i18n.t("adjustableBothSide"),
      others: i18n.t("bothSideLockNoTwistBotton"),
    },
  },
  {
    title: "DB004",
    Description: {
      Diameter: "65mm",
      thickness: "25-45mm",
      Backset: "60/85mm",
      color: i18n.t("goldOrSiler"),
      direction: i18n.t("adjustableBothSide"),
    },
  },
  {
    title: "DB005",
    Description: {
      Diameter: "71mm",
      thickness: "30-45mm",
      Backset: "60-70/70/85/127mm",
      color: i18n.t("goldOrSiler"),
      direction: i18n.t("adjustableBothSide"),
      others: i18n.t("TwistToLockOnExteriorKnob"),
    },
  },
  {
    title: "DB006",
    Description: {
      width: `71mm / ${i18n.t("height")}：82mm`,
      thickness: "38-42mm",
      Backset: "60/85mm",
      direction: i18n.t("adjustableBothSide"),
    },
  },
  {
    title: "DB007",
    Description: {
      type: i18n.t("entranceAndEntrance"),
      Diameter: "63mm",
      thickness: `30-80mm (${i18n.t("fiveOption")})`,
      Backset: "60-70/70/85/127mm",
      color: i18n.t("bronzeRredBronzeBblackSilver"),
      direction: i18n.t("adjustableBothSide"),
      shap: i18n.t("roundAndSquare"),
    },
  },
  {
    title: "DB008",
    Description: {
      width: `72mm / ${i18n.t("height")}：80mm`,
      thickness: "38-42mm",
      Backset: "60/85mm",
      direction: i18n.t("adjustableBothSide"),
    },
  },
];

export default {
  data() {
    return {
      imgs: [
        "D271",
        "D262",
        "W201-43",
        "YW1681",
        "D567",
        "W209-1",
        "DC5X91",
        "W119-6",
      ],
    };
  },
  computed: {},
  methods: {
    goDetail(i) {
      this.$router.push({
        path: "/products/product-detail",
        query: {
          imgUrl: `deadbolts/Deadbolts-0${i}`,
          description: imgDetail[i - 1].Description,
          title: imgDetail[i - 1]?.title,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.item {
  padding: 5px;
}

$pgs: 1, 2, 3, 4, 5, 6, 7, 8;
@each $i in $pgs {
  .product-conrainer-#{$i} {
    background-image: url('../../assets/imgs/mainPage/deadbolts/Deadbolt-0' + #{$i} + '.png');
  }
}
</style>
